<template>
    <div class="housingDetails hasFoot ">
        <HeaderNav3 :activeIndex="activeIndex"></HeaderNav3>
        <Contact></Contact>
        <Ad></Ad>
        <div class="housingDetails-item wrap" :key="index" v-for="(item,index) in items">
            <div class="item1">
                <div class="title">
                   <p>{{item.post_title}}</p>
               </div>
               <div class="banners">
                    <div class="banners1">
                        <SpaceBanner2 :spaceBanner="spaceBanner1"></SpaceBanner2>
                    </div>
                    <div class="banners1">
                       <SpaceBanner1 :spaceBanner="spaceBanner2"></SpaceBanner1>
                    </div>
               </div>
            </div>
            <div class="item2">
                <div class="text">
                    <p>近三個月平均尺價</p>
                    <p><var>${{item.post_price}}</var></p>
                </div>
                <div class="hr"></div>
                <div class="text">
                    <p>近一年平均尺價</p>
                    <p><var>${{item.post_price2}}</var></p>
                </div>
            </div>
            <div class="item3">
                <div class="tab">
                    <div class="tab1">
                        <div class="title">
                            <h1>
                                成交走勢
                            </h1>
                        </div>
                         <el-tabs v-model="activeName2" type="card" >
                            <el-tab-pane label="近五年" name="first">
                                <div class="trendImg">
                                    <img :src="item.more.thumbnail2">
                                </div>
                               
                            </el-tab-pane>
                            <el-tab-pane label="近一年" name="second">
                               <div class="trendImg">
                                    <img :src="item.more.thumbnail">
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="tab2">
                        <div class="title">
                            <h1>
                                租金走勢
                            </h1>
                        </div>
                        <el-tabs v-model="activeName3" type="card" >
                            <el-tab-pane label="近五年" name="first">
                              <div class="trendImg">
                                    <img :src="item.more.thumbnail3">
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>  
                    
                </div>
            </div>
            <div class="item4">
                <div class="box1">
                    <div class="title">
                        <h1>
                            樓盤詳細資料
                        </h1>
                    </div>
                    <div class="box">
                        <div class="t">
                            <div class="text">
                                <p>
                                    地址：<span>{{item.post_add}}</span>
                                </p>
                                <p>
                                    座數：<span>{{item.post_numbers}}</span>
                                </p>
                                <p>
                                    面積：<span>{{item.post_acreage}}</span>
                                </p>
                            </div>
                            <div class="text">
                                <p>
                                    入住年份：<span>{{item.post_year}}年</span>
                                </p>
                                <p>
                                    實用率：<span>{{item.post_ratio}}%</span>
                                </p>
                            </div>
                        </div>
                        <div class="b">
                            <span>
                                會所設施：
                            </span>
                            <p>
                                {{item.post_device}}
                            </p>
                            
                        </div>
                        <div class="b">
                            <span>
                                地点優勢：
                            </span>
                            <p>
                                {{item.post_advantage}}
                            </p>
                            
                        </div>
                       <!--  <div class="t">
                            <div class="text" >
                                <p style="margin:0">
                                    地點優勢：
                                    <span>
                                        {{item.post_advantage}}
                                    </span>
                                </p>
                            </div>
                        </div> -->
                    </div>
                </div>
                <div class="box2">
                    <div class="title">
                        <h1>
                            尺數間隔資料
                        </h1>
                    </div>
                    <div class="box">
                        <p :key="index" v-for="(p,index) in item.post_data">
                          {{p}}
                        </p>
                    </div>
                </div>
            </div>
            <div class="item5">
                <el-table
                  :data="agentRentalList"
                  style="width: 100%"
                  align="center" 
                  >
                  <el-table-column
                    prop="published_time"
                    label="最近成交"
                    width="150"
                    align="center"
                    class-name="a">
                  </el-table-column>
                  <el-table-column
                    prop="loupan_name"
                    label="樓盤名稱"
                    width="180"
                    align="center">
                  </el-table-column>
                  <el-table-column 
                    prop="post_floor"
                    label="樓層"
                    width="135"
                    align="center">
                  </el-table-column>
                   <el-table-column 
                    prop="post_seat"
                    label="座數"
                    width="135"
                    align="center">
                  </el-table-column>
                   <el-table-column 
                    prop="post_acreage"
                    label="尺數"
                    width="135"
                    align="center">
                  </el-table-column>
                   <el-table-column 
                    prop="post_sell"
                    label="價格"
                    width="135"
                    align="center">
                  </el-table-column>
                  <el-table-column 
                    prop="post_sell2"
                    label="尺價"
                    width="135"
                    align="center">
                  </el-table-column>
                    <el-table-column label="詳細內容"  align="center">
                         <template scope="scope">
                            <el-button @click.native="showDetail" type="text" size="small">相關售盤</el-button>
                            <el-button @click.native="showDetail2" type="text" size="small">相關租盤</el-button>
                          </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="item5-page">
                <el-pagination
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    :total="count">
                </el-pagination>
            </div>
            <RecentComments></RecentComments>
            <BrowseAndFavorite></BrowseAndFavorite>
        </div>
    </div>
        
</template>

<script>
import HeaderNav3 from "@/components/HeaderNav3.vue"
import Contact from '@/components/Contact.vue'
import Ad from '@/components/Ad.vue'
import SpaceBanner2 from '@/components/SpaceBanner2.vue'
import SpaceBanner1 from '@/components/SpaceBanner1.vue'
import BrowseAndFavorite from '@/components/BrowseAndFavorite.vue'
import RecentComments from '@/components/RecentComments.vue'
import util from '../../static/js/util.js'
import { V1_GET_ESTATE ,V1_SPACE} from "@/config/api"
export default {
	components:{
        Contact,
        Ad,
        SpaceBanner2,
        SpaceBanner1,
        BrowseAndFavorite,
        RecentComments,
        HeaderNav3
	},
    computed:{
        
        },
    data(){
        this.getData();
       return{
            activeName2: 'first',
            activeName3: 'first',
            id:this.$route.query.id,
            "items":[],
            "spaceBanner1":[],
            "spaceBanner2":[],
            "spaceBanner3":[],
            "activeIndex":"2", 
            "agentRentalList":[],
            "count":0,
            "currentPage":0,
        }
    },
    activated(){ 
        this.$store.commit("IS_SHOW_ALERT",true);
        if(this.$route.query.id!=this.id){
            this.getData();
            this.id=this.$route.query.id;
        }
    },   
    methods:{
        getData(){
            //请求楼盘详情
            this.$http.get(V1_GET_ESTATE+this.$route.query.id,{
            }).then(res=>{
                if(res.data.success){
                    // console.log("楼盘详情");
                    this.items=res.data.infor;
                    this.spaceBanner1=res.data.infor[0].more.photos;
                    this.spaceBanner2=res.data.infor[0].more.photos2;
                    this.agentRentalList=res.data.infor[0].last_deal.list;
                    this.count = Math.ceil(res.data.infor[0].last_deal.count/5)*10;
                    //时间转换成年月份
                    this.items[0].last_deal.list.map((item) => {
                        var da = item.published_time*1000;
                        da = new Date(da);
                        var year = da.getFullYear()+'年';
                        var month = da.getMonth()+1+'月';
                        var date = da.getDate()+'日';
                        item.published_time=[year,month,date].join('');
                    })
                }
            })
           
        },
        getPage(){
            this.$http.get(V1_SPACE+this.$route.query.id+"/"+(this.currentPage|0)+"/"+5+"/"+2,{
            }).then(res=>{
                if(res.data.success){
                    this.agentRentalList=res.data.infor.listItems;
                    this.count = Math.ceil(res.data.infor.totalCount/5)*10;
                    //时间转换成年月份
                    this.agentRentalList.map((item) => {

                        var da = item.published_time*1000;
                        da = new Date(da);
                        var year = da.getFullYear()+'年';
                        var month = da.getMonth()+1+'月';
                        var date = da.getDate()+'日';
                        item.published_time=[year,month,date].join('');
                    })
                   
                }
            })
        },
        handleCurrentChange(page) {
            this.currentPage = page-1;
            this.getPage();
        }, 
        showDetail(row){
           this.$router.push({
                "path": "/agentRentalList",
                "query":{
                    "id":this.id,
                    "type":0
                }
            });
        },
        showDetail2(row){
           this.$router.push({
                "path": "/agentRentalList",
                "query":{
                    "id":this.id,
                    "type":1
                }
            });
        }
    },
    mounted(){ 
    
   
    },
}
</script>
<style lang="scss">
    @import "../style/housingDetails";
</style>